    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>淘宝精品服饰案例</title>
    </head>
    <script src="../jquery-3.4.1.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            border: 1px solid #ff91bd;
            width: 298px;
            height: 251px;
            margin: 200px auto;
            overflow: hidden;
        }
        ul {
            list-style: none;
        }
        .right li a {
            display: block;
            width: 48px;
            height: 27px;
            line-height: 27px;
            border-bottom: 1px solid pink;
            background: url("imgs/lili.jpg") repeat-x;
            text-decoration: none;
            font-size: 14px;
            text-align: center;
            color: black;
        }
        .left li a {
            display: block;
            width: 48px;
            height: 27px;
            line-height: 27px;
            text-align: center;
            border-bottom: 1px solid pink;
            background: url("imgs/lili.jpg") repeat-x;
            text-decoration: none;
            font-size: 14px;
            color: black;

        }
        .middle{
            display: block;
            height: 250px;
            width: 200px;
            border-left: 1px solid pink;
            border-right: 1px solid pink;
        }
        .middle,.left,.right{
                float: left;
                     }
        .left li a:hover,.right li a:hover{
            background-image: url("imgs/abg.gif");
        }
        /*.right li a:hover{*/
        /*    background-image: url("imgs/abg.gif");*/
        /*}*/
    </style>
    <body>
    <div class="box">
        <ul class="left">
            <li><a href="#">女靴</a></li>
            <li><a href="#">雪地靴</a></li>
            <li><a href="#">冬裙</a></li>
            <li><a href="#">呢大衣</a></li>
            <li><a href="#">毛衣</a></li>
            <li><a href="#">棉服</a></li>
            <li><a href="#">女裤</a></li>
            <li><a href="#">羽绒服</a></li>
            <li><a href="#">牛仔裤</a></li>
        </ul>
        <ul class="middle">
            <li><a href="#"><img src="imgs/女靴.jpg" alt=""></a></li>
            <li><a href="#"><img src="imgs/雪地靴.jpg" alt=""></a></li>
            <li><a href="#"><img src="imgs/冬裙.jpg" alt=""></a></li>
            <li><a href="#"><img src="imgs/呢大衣.jpg" alt=""></a></li>
            <li><a href="#"><img src="imgs/毛衣.jpg" alt=""></a></li>
            <li><a href="#"><img src="imgs/棉服.jpg" alt=""></a></li>
            <li><a href="#"><img src="imgs/女裤.jpg" alt=""></a></li>
            <li><a href="#"><img src="imgs/羽绒服.jpg" alt=""></a></li>
            <li><a href="#"><img src="imgs/牛仔裤.jpg" alt=""></a></li>
            <li><a href="#"><img src="imgs/女包.jpg" alt=""></a></li>
            <li><a href="#"><img src="imgs/男包.jpg" alt=""></a></li>
            <li><a href="#"><img src="imgs/登山鞋.jpg" alt=""></a></li>
            <li><a href="#"><img src="imgs/皮带.jpg" alt=""></a></li>
            <li><a href="#"><img src="imgs/围巾.jpg" alt=""></a></li>
            <li><a href="#"><img src="imgs/皮衣.jpg" alt=""></a></li>
            <li><a href="#"><img src="imgs/男毛衣.jpg" alt=""></a></li>
            <li><a href="#"><img src="imgs/男棉服.jpg" alt=""></a></li>
            <li><a href="#"><img src="imgs/男靴.jpg" alt=""></a></li>
        </ul>
        <ul class="right">
            <li><a href="#">女包</a></li>
            <li><a href="#">男包</a></li>
            <li><a href="#">登山鞋</a></li>
            <li><a href="#">皮带</a></li>
            <li><a href="#">围巾</a></li>
            <li><a href="#">皮衣</a></li>
            <li><a href="#">男毛衣</a></li>
            <li><a href="#">男棉服</a></li>
            <li><a href="#">男靴</a></li>
        </ul>
    </div>
    <script>
    jQuery(function () {
                $('.left li').mouseenter(function () {
                    $('.middle li').eq($(this).index()).show().siblings('li').hide();
                });
        $('.right li').mouseenter(function () {
            // $(".middle li').eq($("+(this.index()+9+")").show().siblings('li').hide();
            $('.middle li').eq($(this).index()+9).show().siblings('li').hide();
        });
        })
    </script>
    </body>
    </html>